<!DOCTYPE html>
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">

        <title>ProUI - Responsive Bootstrap Admin Template</title>

        <meta name="description" content="ProUI is a Responsive Bootstrap Admin Template created by pixelcave and published on Themeforest.">
        <meta name="author" content="pixelcave">
        <meta name="robots" content="noindex, nofollow">

        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">

        <!-- Icons -->
        <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
        <link rel="shortcut icon" href="img/favicon.png">
        <link rel="apple-touch-icon" href="img/icon57.png" sizes="57x57">
        <link rel="apple-touch-icon" href="img/icon72.png" sizes="72x72">
        <link rel="apple-touch-icon" href="img/icon76.png" sizes="76x76">
        <link rel="apple-touch-icon" href="img/icon114.png" sizes="114x114">
        <link rel="apple-touch-icon" href="img/icon120.png" sizes="120x120">
        <link rel="apple-touch-icon" href="img/icon144.png" sizes="144x144">
        <link rel="apple-touch-icon" href="img/icon152.png" sizes="152x152">
        <link rel="apple-touch-icon" href="img/icon180.png" sizes="180x180">
        <!-- END Icons -->

        <!-- Stylesheets -->
        <!-- Bootstrap is included in its original form, unaltered -->
        <link rel="stylesheet" href="css/bootstrap.min.css">

        <!-- Related styles of various icon packs and plugins -->
        <link rel="stylesheet" href="css/plugins.css">

        <!-- The main stylesheet of this template. All Bootstrap overwrites are defined in here -->
        <link rel="stylesheet" href="css/main.css">

        <!-- Include a specific file here from css/themes/ folder to alter the default theme of the template -->

        <!-- The themes stylesheet of this template (for using specific theme color in individual elements - must included last) -->
        <link rel="stylesheet" href="css/themes.css">
        <!-- END Stylesheets -->

        <!-- Modernizr (browser feature detection library) & Respond.js (enables responsive CSS code on browsers that don't support it, eg IE8) -->
        <script src="js/vendor/modernizr-respond.min.js"></script>
    </head>
    <body>
        <!-- Page Wrapper -->
        <!-- In the PHP version you can set the following options from inc/config file -->
        <!--
            Available classes:

            'page-loading'      enables page preloader
        -->
        <div id="page-wrapper">
            <!-- Preloader -->
            <!-- Preloader functionality (initialized in js/app.js) - pageLoading() -->
            <!-- Used only if page preloader is enabled from inc/config (PHP version) or the class 'page-loading' is added in #page-wrapper element (HTML version) -->
            <div class="preloader themed-background">
                <h1 class="push-top-bottom text-light text-center"><strong>Pro</strong>UI</h1>
                <div class="inner">
                    <h3 class="text-light visible-lt-ie9 visible-lt-ie10"><strong>Loading..</strong></h3>
                    <div class="preloader-spinner hidden-lt-ie9 hidden-lt-ie10"></div>
                </div>
            </div>
            <!-- END Preloader -->

            <!-- Page Container -->
            <!-- In the PHP version you can set the following options from inc/config file -->
            <!--
                Available #page-container classes:

                '' (None)                                       for a full main and alternative sidebar hidden by default (> 991px)

                'sidebar-visible-lg'                            for a full main sidebar visible by default (> 991px)
                'sidebar-partial'                               for a partial main sidebar which opens on mouse hover, hidden by default (> 991px)
                'sidebar-partial sidebar-visible-lg'            for a partial main sidebar which opens on mouse hover, visible by default (> 991px)
                'sidebar-mini sidebar-visible-lg-mini'          for a mini main sidebar with a flyout menu, enabled by default (> 991px + Best with static layout)
                'sidebar-mini sidebar-visible-lg'               for a mini main sidebar with a flyout menu, disabled by default (> 991px + Best with static layout)

                'sidebar-alt-visible-lg'                        for a full alternative sidebar visible by default (> 991px)
                'sidebar-alt-partial'                           for a partial alternative sidebar which opens on mouse hover, hidden by default (> 991px)
                'sidebar-alt-partial sidebar-alt-visible-lg'    for a partial alternative sidebar which opens on mouse hover, visible by default (> 991px)

                'sidebar-partial sidebar-alt-partial'           for both sidebars partial which open on mouse hover, hidden by default (> 991px)

                'sidebar-no-animations'                         add this as extra for disabling sidebar animations on large screens (> 991px) - Better performance with heavy pages!

                'style-alt'                                     for an alternative main style (without it: the default style)
                'footer-fixed'                                  for a fixed footer (without it: a static footer)

                'disable-menu-autoscroll'                       add this to disable the main menu auto scrolling when opening a submenu

                'header-fixed-top'                              has to be added only if the class 'navbar-fixed-top' was added on header.navbar
                'header-fixed-bottom'                           has to be added only if the class 'navbar-fixed-bottom' was added on header.navbar

                'enable-cookies'                                enables cookies for remembering active color theme when changed from the sidebar links
            -->
            <div id="page-container" class="sidebar-partial sidebar-visible-lg sidebar-no-animations">
                <!-- Alternative Sidebar -->
                <div id="sidebar-alt">
                    <!-- Wrapper for scrolling functionality -->
                    <div id="sidebar-alt-scroll">
                        <!-- Sidebar Content -->
                        <div class="sidebar-content">
                            <!-- Chat -->
                            <!-- Chat demo functionality initialized in js/app.js -> chatUi() -->
                            <a href="page_ready_chat.html" class="sidebar-title">
                                <i class="gi gi-comments pull-right"></i> <strong>Chat</strong>UI
                            </a>
                            <!-- Chat Users -->
                            <ul class="chat-users clearfix">
                                <li>
                                    <a href="javascript:void(0)" class="chat-user-online">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar12.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="chat-user-online">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar15.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="chat-user-online">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar10.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="chat-user-online">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar4.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="chat-user-away">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar7.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="chat-user-away">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar9.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="chat-user-busy">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar16.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar1.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar4.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar3.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar13.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)">
                                        <span></span>
                                        <img src="img/placeholders/avatars/avatar5.jpg" alt="avatar" class="img-circle">
                                    </a>
                                </li>
                            </ul>
                            <!-- END Chat Users -->

                            <!-- Chat Talk -->
                            <div class="chat-talk display-none">
                                <!-- Chat Info -->
                                <div class="chat-talk-info sidebar-section">
                                    <button id="chat-talk-close-btn" class="btn btn-xs btn-default pull-right">
                                        <i class="fa fa-times"></i>
                                    </button>
                                    <img src="img/placeholders/avatars/avatar5.jpg" alt="avatar" class="img-circle pull-left">
                                    <strong>John</strong> Doe
                                </div>
                                <!-- END Chat Info -->

                                <!-- Chat Messages -->
                                <ul class="chat-talk-messages">
                                    <li class="text-center"><small>Yesterday, 18:35</small></li>
                                    <li class="chat-talk-msg animation-slideRight">Hey admin?</li>
                                    <li class="chat-talk-msg animation-slideRight">How are you?</li>
                                    <li class="text-center"><small>Today, 7:10</small></li>
                                    <li class="chat-talk-msg chat-talk-msg-highlight themed-border animation-slideLeft">I'm fine, thanks!</li>
                                </ul>
                                <!-- END Chat Messages -->

                                <!-- Chat Input -->
                                <form action="index.html" method="post" id="sidebar-chat-form" class="chat-form">
                                    <input type="text" id="sidebar-chat-message" name="sidebar-chat-message" class="form-control form-control-borderless" placeholder="Type a message..">
                                </form>
                                <!-- END Chat Input -->
                            </div>
                            <!--  END Chat Talk -->
                            <!-- END Chat -->

                            <!-- Activity -->
                            <a href="javascript:void(0)" class="sidebar-title">
                                <i class="fa fa-globe pull-right"></i> <strong>Activity</strong>UI
                            </a>
                            <div class="sidebar-section">
                                <div class="alert alert-danger alert-alt">
                                    <small>just now</small><br>
                                    <i class="fa fa-thumbs-up fa-fw"></i> Upgraded to Pro plan
                                </div>
                                <div class="alert alert-info alert-alt">
                                    <small>2 hours ago</small><br>
                                    <i class="gi gi-coins fa-fw"></i> You had a new sale!
                                </div>
                                <div class="alert alert-success alert-alt">
                                    <small>3 hours ago</small><br>
                                    <i class="fa fa-plus fa-fw"></i> <a href="page_ready_user_profile.html"><strong>John Doe</strong></a> would like to become friends!<br>
                                    <a href="javascript:void(0)" class="btn btn-xs btn-primary"><i class="fa fa-check"></i> Accept</a>
                                    <a href="javascript:void(0)" class="btn btn-xs btn-default"><i class="fa fa-times"></i> Ignore</a>
                                </div>
                                <div class="alert alert-warning alert-alt">
                                    <small>2 days ago</small><br>
                                    Running low on space<br><strong>18GB in use</strong> 2GB left<br>
                                    <a href="page_ready_pricing_tables.html" class="btn btn-xs btn-primary"><i class="fa fa-arrow-up"></i> Upgrade Plan</a>
                                </div>
                            </div>
                            <!-- END Activity -->

                            <!-- Messages -->
                            <a href="page_ready_inbox.html" class="sidebar-title">
                                <i class="fa fa-envelope pull-right"></i> <strong>Messages</strong>UI (5)
                            </a>
                            <div class="sidebar-section">
                                <div class="alert alert-alt">
                                    Debra Stanley<small class="pull-right">just now</small><br>
                                    <a href="page_ready_inbox_message.html"><strong>New Follower</strong></a>
                                </div>
                                <div class="alert alert-alt">
                                    Sarah Cole<small class="pull-right">2 min ago</small><br>
                                    <a href="page_ready_inbox_message.html"><strong>Your subscription was updated</strong></a>
                                </div>
                                <div class="alert alert-alt">
                                    Bryan Porter<small class="pull-right">10 min ago</small><br>
                                    <a href="page_ready_inbox_message.html"><strong>A great opportunity</strong></a>
                                </div>
                                <div class="alert alert-alt">
                                    Jose Duncan<small class="pull-right">30 min ago</small><br>
                                    <a href="page_ready_inbox_message.html"><strong>Account Activation</strong></a>
                                </div>
                                <div class="alert alert-alt">
                                    Henry Ellis<small class="pull-right">40 min ago</small><br>
                                    <a href="page_ready_inbox_message.html"><strong>You reached 10.000 Followers!</strong></a>
                                </div>
                            </div>
                            <!-- END Messages -->
                        </div>
                        <!-- END Sidebar Content -->
                    </div>
                    <!-- END Wrapper for scrolling functionality -->
                </div>
                <!-- END Alternative Sidebar -->

                <!-- Main Sidebar -->
                <div id="sidebar">
                    <!-- Wrapper for scrolling functionality -->
                    <div id="sidebar-scroll">
                        <!-- Sidebar Content -->
                        <div class="sidebar-content">
                            <!-- Brand -->
                            <a href="index.html" class="sidebar-brand">
                                <i class="gi gi-flash"></i><span class="sidebar-nav-mini-hide"><strong>Pro</strong>UI</span>
                            </a>
                            <!-- END Brand -->

                            <!-- User Info -->
                            <div class="sidebar-section sidebar-user clearfix sidebar-nav-mini-hide">
                                <div class="sidebar-user-avatar">
                                    <a href="page_ready_user_profile.html">
                                        <img src="img/placeholders/avatars/avatar2.jpg" alt="avatar">
                                    </a>
                                </div>
                                <div class="sidebar-user-name">John Doe</div>
                                <div class="sidebar-user-links">
                                    <a href="page_ready_user_profile.html" data-toggle="tooltip" data-placement="bottom" title="Profile"><i class="gi gi-user"></i></a>
                                    <a href="page_ready_inbox.html" data-toggle="tooltip" data-placement="bottom" title="Messages"><i class="gi gi-envelope"></i></a>
                                    <!-- Opens the user settings modal that can be found at the bottom of each page (page_footer.html in PHP version) -->
                                    <a href="javascript:void(0)" class="enable-tooltip" data-placement="bottom" title="Settings" onclick="$('#modal-user-settings').modal('show');"><i class="gi gi-cogwheel"></i></a>
                                    <a href="login.html" data-toggle="tooltip" data-placement="bottom" title="Logout"><i class="gi gi-exit"></i></a>
                                </div>
                            </div>
                            <!-- END User Info -->

                            <!-- Theme Colors -->
                            <!-- Change Color Theme functionality can be found in js/app.js - templateOptions() -->
                            <ul class="sidebar-section sidebar-themes clearfix sidebar-nav-mini-hide">
                                <!-- You can also add the default color theme
                                <li class="active">
                                    <a href="javascript:void(0)" class="themed-background-dark-default themed-border-default" data-theme="default" data-toggle="tooltip" title="Default Blue"></a>
                                </li>
                                -->
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-night themed-border-night" data-theme="css/themes/night.css" data-toggle="tooltip" title="Night"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-amethyst themed-border-amethyst" data-theme="css/themes/amethyst.css" data-toggle="tooltip" title="Amethyst"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-modern themed-border-modern" data-theme="css/themes/modern.css" data-toggle="tooltip" title="Modern"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-autumn themed-border-autumn" data-theme="css/themes/autumn.css" data-toggle="tooltip" title="Autumn"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-flatie themed-border-flatie" data-theme="css/themes/flatie.css" data-toggle="tooltip" title="Flatie"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-spring themed-border-spring" data-theme="css/themes/spring.css" data-toggle="tooltip" title="Spring"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-fancy themed-border-fancy" data-theme="css/themes/fancy.css" data-toggle="tooltip" title="Fancy"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-fire themed-border-fire" data-theme="css/themes/fire.css" data-toggle="tooltip" title="Fire"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-coral themed-border-coral" data-theme="css/themes/coral.css" data-toggle="tooltip" title="Coral"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-lake themed-border-lake" data-theme="css/themes/lake.css" data-toggle="tooltip" title="Lake"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-forest themed-border-forest" data-theme="css/themes/forest.css" data-toggle="tooltip" title="Forest"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-waterlily themed-border-waterlily" data-theme="css/themes/waterlily.css" data-toggle="tooltip" title="Waterlily"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-emerald themed-border-emerald" data-theme="css/themes/emerald.css" data-toggle="tooltip" title="Emerald"></a>
                                </li>
                                <li>
                                    <a href="javascript:void(0)" class="themed-background-dark-blackberry themed-border-blackberry" data-theme="css/themes/blackberry.css" data-toggle="tooltip" title="Blackberry"></a>
                                </li>
                            </ul>
                            <!-- END Theme Colors -->

                            <!-- Sidebar Navigation -->
                            <ul class="sidebar-nav">
                                <li>
                                    <a href="index.html"><i class="gi gi-stopwatch sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Dashboard</span></a>
                                </li>
                                <li>
                                    <a href="index2.html"><i class="gi gi-leaf sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Dashboard 2</span></a>
                                </li>
                                <li>
                                    <a href="#" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="gi gi-shopping_cart sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">eCommerce</span></a>
                                    <ul>
                                        <li>
                                            <a href="page_ecom_dashboard.html">Dashboard</a>
                                        </li>
                                        <li>
                                            <a href="page_ecom_orders.html">Orders</a>
                                        </li>
                                        <li>
                                            <a href="page_ecom_order_view.html">Order View</a>
                                        </li>
                                        <li>
                                            <a href="page_ecom_products.html">Products</a>
                                        </li>
                                        <li>
                                            <a href="page_ecom_product_edit.html">Product Edit</a>
                                        </li>
                                        <li>
                                            <a href="page_ecom_customer_view.html">Customer View</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sidebar-header">
                                    <span class="sidebar-header-options clearfix"><a href="javascript:void(0)" data-toggle="tooltip" title="Quick Settings"><i class="gi gi-settings"></i></a><a href="javascript:void(0)" data-toggle="tooltip" title="Create the most amazing pages with the widget kit!"><i class="gi gi-lightbulb"></i></a></span>
                                    <span class="sidebar-header-title">Widget Kit</span>
                                </li>
                                <li>
                                    <a href="page_widgets_stats.html"><i class="gi gi-charts sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Statistics</span></a>
                                </li>
                                <li>
                                    <a href="page_widgets_social.html"><i class="gi gi-share_alt sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Social</span></a>
                                </li>
                                <li>
                                    <a href="page_widgets_media.html" class=" active"><i class="gi gi-film sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Media</span></a>
                                </li>
                                <li>
                                    <a href="page_widgets_links.html"><i class="gi gi-link sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Links</span></a>
                                </li>
                                <li class="sidebar-header">
                                    <span class="sidebar-header-options clearfix"><a href="javascript:void(0)" data-toggle="tooltip" title="Quick Settings"><i class="gi gi-settings"></i></a></span>
                                    <span class="sidebar-header-title">Design Kit</span>
                                </li>
                                <li>
                                    <a href="#" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="gi gi-certificate sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">User Interface</span></a>
                                    <ul>
                                        <li>
                                            <a href="page_ui_grid_blocks.html">Grid &amp; Blocks</a>
                                        </li>
                                        <li>
                                            <a href="page_ui_draggable_blocks.html">Draggable Blocks</a>
                                        </li>
                                        <li>
                                            <a href="page_ui_typography.html">Typography</a>
                                        </li>
                                        <li>
                                            <a href="page_ui_buttons_dropdowns.html">Buttons &amp; Dropdowns</a>
                                        </li>
                                        <li>
                                            <a href="page_ui_navigation_more.html">Navigation &amp; More</a>
                                        </li>
                                        <li>
                                            <a href="page_ui_horizontal_menu.html">Horizontal Menu</a>
                                        </li>
                                        <li>
                                            <a href="page_ui_progress_loading.html">Progress &amp; Loading</a>
                                        </li>
                                        <li>
                                            <a href="page_ui_preloader.html">Page Preloader</a>
                                        </li>
                                        <li>
                                            <a href="page_ui_color_themes.html">Color Themes</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="gi gi-notes_2 sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Forms</span></a>
                                    <ul>
                                        <li>
                                            <a href="page_forms_general.html">General</a>
                                        </li>
                                        <li>
                                            <a href="page_forms_components.html">Components</a>
                                        </li>
                                        <li>
                                            <a href="page_forms_validation.html">Validation</a>
                                        </li>
                                        <li>
                                            <a href="page_forms_wizard.html">Wizard</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="gi gi-table sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Tables</span></a>
                                    <ul>
                                        <li>
                                            <a href="page_tables_general.html">General</a>
                                        </li>
                                        <li>
                                            <a href="page_tables_responsive.html">Responsive</a>
                                        </li>
                                        <li>
                                            <a href="page_tables_datatables.html">Datatables</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="gi gi-cup sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Icon Sets</span></a>
                                    <ul>
                                        <li>
                                            <a href="page_icons_fontawesome.html">Font Awesome</a>
                                        </li>
                                        <li>
                                            <a href="page_icons_glyphicons_pro.html">Glyphicons Pro</a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="gi gi-show_big_thumbnails sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Page Layouts</span></a>
                                    <ul>
                                        <li>
                                            <a href="page_layout_static.html">Static</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_static_fixed_footer.html">Static + Fixed Footer</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_fixed_top.html">Fixed Top Header</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_fixed_top_footer.html">Fixed Top Header + Footer</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_fixed_bottom.html">Fixed Bottom Header</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_fixed_bottom_footer.html">Fixed Bottom Header + Footer</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_static_main_sidebar_mini.html">Mini Main Sidebar</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_static_main_sidebar_partial.html">Partial Main Sidebar</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_static_main_sidebar_visible.html">Visible Main Sidebar</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_static_alternative_sidebar_partial.html">Partial Alternative Sidebar</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_static_alternative_sidebar_visible.html">Visible Alternative Sidebar</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_static_no_sidebars.html">No Sidebars</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_static_both_partial.html">Both Sidebars Partial</a>
                                        </li>
                                        <li>
                                            <a href="page_layout_static_animated.html">Animated Sidebar Transitions</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="sidebar-header">
                                    <span class="sidebar-header-options clearfix"><a href="javascript:void(0)" data-toggle="tooltip" title="Quick Settings"><i class="gi gi-settings"></i></a></span>
                                    <span class="sidebar-header-title">Develop Kit</span>
                                </li>
                                <li>
                                    <a href="#" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="gi gi-brush sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Ready Pages</span></a>
                                    <ul>
                                        <li>
                                            <a href="#" class="sidebar-nav-submenu"><i class="fa fa-angle-left sidebar-nav-indicator"></i>Errors</a>
                                            <ul>
                                                <li>
                                                    <a href="page_ready_400.html">400</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_401.html">401</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_403.html">403</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_404.html">404</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_500.html">500</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_503.html">503</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#" class="sidebar-nav-submenu"><i class="fa fa-angle-left sidebar-nav-indicator"></i>Get Started</a>
                                            <ul>
                                                <li>
                                                    <a href="page_ready_blank.html">Blank</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_blank_alt.html">Blank Alternative</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="page_ready_search_results.html">Search Results (4)</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_article.html">Article</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_user_profile.html">User Profile</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_contacts.html">Contacts</a>
                                        </li>
                                        <li>
                                            <a href="#" class="sidebar-nav-submenu"><i class="fa fa-angle-left sidebar-nav-indicator"></i>e-Learning</a>
                                            <ul>
                                                <li>
                                                    <a href="page_ready_elearning_courses.html">Courses</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_elearning_course_lessons.html">Course - Lessons</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_elearning_course_lesson.html">Course - Lesson Page</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="#" class="sidebar-nav-submenu"><i class="fa fa-angle-left sidebar-nav-indicator"></i>Message Center</a>
                                            <ul>
                                                <li>
                                                    <a href="page_ready_inbox.html">Inbox</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_inbox_compose.html">Compose Message</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_inbox_message.html">View Message</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="page_ready_chat.html">Chat</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_timeline.html">Timeline</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_files.html">Files</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_tickets.html">Tickets</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_bug_tracker.html">Bug Tracker</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_tasks.html">Tasks</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_faq.html">FAQ</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_pricing_tables.html">Pricing Tables</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_invoice.html">Invoice</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_forum.html">Forum (3)</a>
                                        </li>
                                        <li>
                                            <a href="page_ready_coming_soon.html">Coming Soon</a>
                                        </li>
                                        <li>
                                            <a href="#" class="sidebar-nav-submenu"><i class="fa fa-angle-left sidebar-nav-indicator"></i>Login, Register &amp; Lock</a>
                                            <ul>
                                                <li>
                                                    <a href="login.html">Login</a>
                                                </li>
                                                <li>
                                                    <a href="login_full.html">Login (Full Background)</a>
                                                </li>
                                                <li>
                                                    <a href="login_alt.html">Login 2</a>
                                                </li>
                                                <li>
                                                    <a href="login.html#reminder">Password Reminder</a>
                                                </li>
                                                <li>
                                                    <a href="login_alt.html#reminder">Password Reminder 2</a>
                                                </li>
                                                <li>
                                                    <a href="login.html#register">Register</a>
                                                </li>
                                                <li>
                                                    <a href="login_alt.html#register">Register 2</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_lock_screen.html">Lock Screen</a>
                                                </li>
                                                <li>
                                                    <a href="page_ready_lock_screen_alt.html">Lock Screen 2</a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="#" class="sidebar-nav-menu"><i class="fa fa-angle-left sidebar-nav-indicator sidebar-nav-mini-hide"></i><i class="fa fa-wrench sidebar-nav-icon"></i><span class="sidebar-nav-mini-hide">Components</span></a>
                                    <ul>
                                        <li>
                                            <a href="#" class="sidebar-nav-submenu"><i class="fa fa-angle-left sidebar-nav-indicator"></i>3 Level Menu</a>
                                            <ul>
                                                <li>
                                                    <a href="#">Link 1</a>
                                                </li>
                                                <li>
                                                    <a href="#">Link 2</a>
                                                </li>
                                            </ul>
                                        </li>
                                        <li>
                                            <a href="page_comp_maps.html">Maps</a>
                                        </li>
                                        <li>
                                            <a href="page_comp_charts.html">Charts</a>
                                        </li>
                                        <li>
                                            <a href="page_comp_gallery.html">Gallery</a>
                                        </li>
                                        <li>
                                            <a href="page_comp_carousel.html">Carousel</a>
                                        </li>
                                        <li>
                                            <a href="page_comp_calendar.html">Calendar</a>
                                        </li>
                                        <li>
                                            <a href="page_comp_animations.html">CSS3 Animations</a>
                                        </li>
                                        <li>
                                            <a href="page_comp_syntax_highlighting.html">Syntax Highlighting</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                            <!-- END Sidebar Navigation -->

                            <!-- Sidebar Notifications -->
                            <div class="sidebar-header sidebar-nav-mini-hide">
                                <span class="sidebar-header-options clearfix">
                                    <a href="javascript:void(0)" data-toggle="tooltip" title="Refresh"><i class="gi gi-refresh"></i></a>
                                </span>
                                <span class="sidebar-header-title">Activity</span>
                            </div>
                            <div class="sidebar-section sidebar-nav-mini-hide">
                                <div class="alert alert-success alert-alt">
                                    <small>5 min ago</small><br>
                                    <i class="fa fa-thumbs-up fa-fw"></i> You had a new sale ($10)
                                </div>
                                <div class="alert alert-info alert-alt">
                                    <small>10 min ago</small><br>
                                    <i class="fa fa-arrow-up fa-fw"></i> Upgraded to Pro plan
                                </div>
                                <div class="alert alert-warning alert-alt">
                                    <small>3 hours ago</small><br>
                                    <i class="fa fa-exclamation fa-fw"></i> Running low on space<br><strong>18GB in use</strong> 2GB left
                                </div>
                                <div class="alert alert-danger alert-alt">
                                    <small>Yesterday</small><br>
                                    <i class="fa fa-bug fa-fw"></i> <a href="javascript:void(0)"><strong>New bug submitted</strong></a>
                                </div>
                            </div>
                            <!-- END Sidebar Notifications -->
                        </div>
                        <!-- END Sidebar Content -->
                    </div>
                    <!-- END Wrapper for scrolling functionality -->
                </div>
                <!-- END Main Sidebar -->

                <!-- Main Container -->
                <div id="main-container">
                    <!-- Header -->
                    <!-- In the PHP version you can set the following options from inc/config file -->
                    <!--
                        Available header.navbar classes:

                        'navbar-default'            for the default light header
                        'navbar-inverse'            for an alternative dark header

                        'navbar-fixed-top'          for a top fixed header (fixed sidebars with scroll will be auto initialized, functionality can be found in js/app.js - handleSidebar())
                            'header-fixed-top'      has to be added on #page-container only if the class 'navbar-fixed-top' was added

                        'navbar-fixed-bottom'       for a bottom fixed header (fixed sidebars with scroll will be auto initialized, functionality can be found in js/app.js - handleSidebar()))
                            'header-fixed-bottom'   has to be added on #page-container only if the class 'navbar-fixed-bottom' was added
                    -->
                    <header class="navbar navbar-default">
                        <!-- Left Header Navigation -->
                        <ul class="nav navbar-nav-custom">
                            <!-- Main Sidebar Toggle Button -->
                            <li>
                                <a href="javascript:void(0)" onclick="App.sidebar('toggle-sidebar');this.blur();">
                                    <i class="fa fa-bars fa-fw"></i>
                                </a>
                            </li>
                            <!-- END Main Sidebar Toggle Button -->

                            <!-- Template Options -->
                            <!-- Change Options functionality can be found in js/app.js - templateOptions() -->
                            <li class="dropdown">
                                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="gi gi-settings"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-custom dropdown-options">
                                    <li class="dropdown-header text-center">Header Style</li>
                                    <li>
                                        <div class="btn-group btn-group-justified btn-group-sm">
                                            <a href="javascript:void(0)" class="btn btn-primary" id="options-header-default">Light</a>
                                            <a href="javascript:void(0)" class="btn btn-primary" id="options-header-inverse">Dark</a>
                                        </div>
                                    </li>
                                    <li class="dropdown-header text-center">Page Style</li>
                                    <li>
                                        <div class="btn-group btn-group-justified btn-group-sm">
                                            <a href="javascript:void(0)" class="btn btn-primary" id="options-main-style">Default</a>
                                            <a href="javascript:void(0)" class="btn btn-primary" id="options-main-style-alt">Alternative</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <!-- END Template Options -->
                        </ul>
                        <!-- END Left Header Navigation -->

                        <!-- Search Form -->
                        <form action="page_ready_search_results.html" method="post" class="navbar-form-custom">
                            <div class="form-group">
                                <input type="text" id="top-search" name="top-search" class="form-control" placeholder="Search..">
                            </div>
                        </form>
                        <!-- END Search Form -->

                        <!-- Right Header Navigation -->
                        <ul class="nav navbar-nav-custom pull-right">
                            <!-- Alternative Sidebar Toggle Button -->
                            <li>
                                <!-- If you do not want the main sidebar to open when the alternative sidebar is closed, just remove the second parameter: App.sidebar('toggle-sidebar-alt'); -->
                                <a href="javascript:void(0)" onclick="App.sidebar('toggle-sidebar-alt', 'toggle-other');this.blur();">
                                    <i class="gi gi-share_alt"></i>
                                    <span class="label label-primary label-indicator animation-floating">4</span>
                                </a>
                            </li>
                            <!-- END Alternative Sidebar Toggle Button -->

                            <!-- User Dropdown -->
                            <li class="dropdown">
                                <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">
                                    <img src="img/placeholders/avatars/avatar2.jpg" alt="avatar"> <i class="fa fa-angle-down"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-custom dropdown-menu-right">
                                    <li class="dropdown-header text-center">Account</li>
                                    <li>
                                        <a href="page_ready_timeline.html">
                                            <i class="fa fa-clock-o fa-fw pull-right"></i>
                                            <span class="badge pull-right">10</span>
                                            Updates
                                        </a>
                                        <a href="page_ready_inbox.html">
                                            <i class="fa fa-envelope-o fa-fw pull-right"></i>
                                            <span class="badge pull-right">5</span>
                                            Messages
                                        </a>
                                        <a href="page_ready_pricing_tables.html"><i class="fa fa-magnet fa-fw pull-right"></i>
                                            <span class="badge pull-right">3</span>
                                            Subscriptions
                                        </a>
                                        <a href="page_ready_faq.html"><i class="fa fa-question fa-fw pull-right"></i>
                                            <span class="badge pull-right">11</span>
                                            FAQ
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="page_ready_user_profile.html">
                                            <i class="fa fa-user fa-fw pull-right"></i>
                                            Profile
                                        </a>
                                        <!-- Opens the user settings modal that can be found at the bottom of each page (page_footer.html in PHP version) -->
                                        <a href="#modal-user-settings" data-toggle="modal">
                                            <i class="fa fa-cog fa-fw pull-right"></i>
                                            Settings
                                        </a>
                                    </li>
                                    <li class="divider"></li>
                                    <li>
                                        <a href="page_ready_lock_screen.html"><i class="fa fa-lock fa-fw pull-right"></i> Lock Account</a>
                                        <a href="login.html"><i class="fa fa-ban fa-fw pull-right"></i> Logout</a>
                                    </li>
                                    <li class="dropdown-header text-center">Activity</li>
                                    <li>
                                        <div class="alert alert-success alert-alt">
                                            <small>5 min ago</small><br>
                                            <i class="fa fa-thumbs-up fa-fw"></i> You had a new sale ($10)
                                        </div>
                                        <div class="alert alert-info alert-alt">
                                            <small>10 min ago</small><br>
                                            <i class="fa fa-arrow-up fa-fw"></i> Upgraded to Pro plan
                                        </div>
                                        <div class="alert alert-warning alert-alt">
                                            <small>3 hours ago</small><br>
                                            <i class="fa fa-exclamation fa-fw"></i> Running low on space<br><strong>18GB in use</strong> 2GB left
                                        </div>
                                        <div class="alert alert-danger alert-alt">
                                            <small>Yesterday</small><br>
                                            <i class="fa fa-bug fa-fw"></i> <a href="javascript:void(0)" class="alert-link">New bug submitted</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                            <!-- END User Dropdown -->
                        </ul>
                        <!-- END Right Header Navigation -->
                    </header>
                    <!-- END Header -->

                    <!-- Page content -->
                    <div id="page-content">
                        <!-- Media Widgets Header -->
                        <div class="content-header">
                            <div class="header-section">
                                <h1>
                                    <i class="gi gi-film"></i>Media Widgets<br><small>Great for your media content!</small>
                                </h1>
                            </div>
                        </div>
                        <!-- END Media Widgets Header -->

                        <!-- Simple Widgets with Icons Row -->
                        <div class="row">
                            <div class="col-sm-6 col-md-4">
                                <!-- Widget -->
                                <div class="widget">
                                    <div class="widget-simple">
                                        <a href="javascript:void(0)" class="widget-icon pull-left animation-fadeIn themed-background">
                                            <i class="gi gi-film"></i>
                                        </a>
                                        <h4 class="widget-content text-right animation-hatch">
                                            <a href="javascript:void(0)">3.250 <strong>Movies</strong></a>
                                            <small>in <em>Comedy</em></small>
                                        </h4>
                                    </div>
                                </div>
                                <!-- END Widget -->
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <!-- Widget -->
                                <div class="widget">
                                    <div class="widget-simple">
                                        <a href="javascript:void(0)" class="widget-icon pull-left animation-fadeIn themed-background-fancy">
                                            <i class="gi gi-albums"></i>
                                        </a>
                                        <h4 class="widget-content text-right animation-hatch">
                                            <a href="javascript:void(0)">256 <strong>Albums</strong></a>
                                            <small>in <em>Classical</em></small>
                                        </h4>
                                    </div>
                                </div>
                                <!-- END Widget -->
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <!-- Widget -->
                                <div class="widget">
                                    <div class="widget-simple">
                                        <a href="javascript:void(0)" class="widget-icon pull-left animation-fadeIn themed-background-fire">
                                            <i class="gi gi-picture"></i>
                                        </a>
                                        <h4 class="widget-content text-right animation-hatch">
                                            <a href="javascript:void(0)">2.120 <strong>Photos</strong></a>
                                            <small>in <em>Family</em></small>
                                        </h4>
                                    </div>
                                </div>
                                <!-- END Widget -->
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <!-- Widget -->
                                <div class="widget">
                                    <div class="widget-simple themed-background-dark">
                                        <a href="javascript:void(0)" class="widget-icon pull-left animation-fadeIn themed-background">
                                            <i class="gi gi-picture"></i>
                                        </a>
                                        <h4 class="widget-content widget-content-light text-right animation-hatch">
                                            <a href="javascript:void(0)">2.120 <strong>Photos</strong></a>
                                            <small>in <em>Family</em></small>
                                        </h4>
                                    </div>
                                </div>
                                <!-- END Widget -->
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <!-- Widget -->
                                <div class="widget">
                                    <div class="widget-simple themed-background-dark-fire">
                                        <a href="javascript:void(0)" class="widget-icon pull-left animation-fadeIn themed-background-fire">
                                            <i class="gi gi-folder_open"></i>
                                        </a>
                                        <h4 class="widget-content widget-content-light text-right animation-hatch">
                                            <a href="javascript:void(0)" class="themed-color-fire">12 <strong>Projects</strong></a>
                                            <small>in <em>Design</em></small>
                                        </h4>
                                    </div>
                                </div>
                                <!-- END Widget -->
                            </div>
                            <div class="col-sm-6 col-md-4">
                                <!-- Widget -->
                                <div class="widget">
                                    <div class="widget-simple themed-background-dark-autumn">
                                        <a href="javascript:void(0)" class="widget-icon pull-left animation-fadeIn themed-background-autumn">
                                            <i class="gi gi-music"></i>
                                        </a>
                                        <h4 class="widget-content widget-content-light text-right animation-hatch">
                                            <a href="javascript:void(0)" class="themed-color-autumn">16 <strong>Songs</strong></a>
                                            <small>in <em>Album</em></small>
                                        </h4>
                                    </div>
                                </div>
                                <!-- END Widget -->
                            </div>
                        </div>
                        <!-- END Simple Widgets with Icons Row -->

                        <!-- Advanced Widgets Row -->
                        <div class="row">
                            <div class="col-md-4">
                                <!-- Advanced Active Theme Color Widget -->
                                <div class="widget">
                                    <div class="widget-advanced">
                                        <!-- Widget Header -->
                                        <div class="widget-header text-center themed-background-dark">
                                            <div class="widget-options-left">
                                                <button class="btn btn-xs btn-default" data-toggle="tooltip" title="Edit Widget"><i class="fa fa-pencil"></i></button>
                                            </div>
                                            <div class="widget-options">
                                                <div class="btn-group btn-group-xs">
                                                    <button class="btn btn-xs btn-default" data-toggle="tooltip" title="Add album to cart"><i class="fa fa-shopping-cart"></i></button>
                                                    <button class="btn btn-xs btn-default" data-toggle="tooltip" title="Favorite"><i class="fa fa-heart text-danger"></i></button>
                                                </div>
                                            </div>
                                            <h3 class="widget-content-light">
                                                <a href="javascript:void(0)" class="themed-color">Best Songs of 2013</a><br>
                                                <small>Various Artists, 20 Songs</small>
                                            </h3>
                                        </div>
                                        <!-- END Widget Header -->

                                        <!-- Widget Main -->
                                        <div class="widget-main">
                                            <a href="javascript:void(0)" class="widget-image-container animation-bigEntrance">
                                                <span class="widget-icon themed-background"><i class="gi gi-albums"></i></span>
                                            </a>
                                            <table class="table table-borderless table-striped table-condensed table-vcenter">
                                                <tbody>
                                                    <tr>
                                                        <td style="width: 10px;">01</td>
                                                        <td><strong>Song Title</strong></td>
                                                        <td class="text-right">3:15</td>
                                                        <td class="text-center" style="width: 70px;">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"><i class="fa fa-play"></i></a>
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>02</td>
                                                        <td><strong>Song Title</strong></td>
                                                        <td class="text-right">3:45</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"><i class="fa fa-play"></i></a>
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>03</td>
                                                        <td><strong>Song Title</strong></td>
                                                        <td class="text-right">2:59</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"><i class="fa fa-play"></i></a>
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>04</td>
                                                        <td><strong>Song Title</strong></td>
                                                        <td class="text-right">3:10</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"><i class="fa fa-play"></i></a>
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>05</td>
                                                        <td><strong>Song Title</strong></td>
                                                        <td class="text-right">3:28</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"><i class="fa fa-play"></i></a>
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <div class="text-center"><a href="javascript:void(0)">Show all..</a></div>
                                        </div>
                                        <!-- END Widget Main -->
                                    </div>
                                </div>
                                <!-- END Advanced Active Theme Color Widget -->
                            </div>
                            <div class="col-md-4">
                                <!-- Advanced Specific Theme Color Widget -->
                                <div class="widget">
                                    <div class="widget-advanced">
                                        <!-- Widget Header -->
                                        <div class="widget-header text-center themed-background-dark-flatie">
                                            <h3 class="widget-content-light">
                                                <a href="javascript:void(0)" class="themed-color-flatie">Best Movies Ever</a><br>
                                                <small>Top 200</small>
                                            </h3>
                                        </div>
                                        <!-- END Widget Header -->

                                        <!-- Widget Main -->
                                        <div class="widget-main">
                                            <a href="javascript:void(0)" class="widget-image-container animation-bigEntrance">
                                                <span class="widget-icon themed-background-flatie"><i class="gi gi-film"></i></span>
                                            </a>
                                            <table class="table table-borderless table-striped table-condensed table-vcenter">
                                                <tbody>
                                                    <tr>
                                                        <td style="width: 10px;">01</td>
                                                        <td><a href="javascript:void(0)"><strong>Movie Title</strong></a></td>
                                                        <td class="text-right">160 min</td>
                                                        <td class="text-center" style="width: 70px;">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"><i class="fa fa-play"></i></a>
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Download"><i class="fa fa-cloud-download"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>02</td>
                                                        <td><a href="javascript:void(0)"><strong>Movie Title</strong></a></td>
                                                        <td class="text-right">182 min</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"><i class="fa fa-play"></i></a>
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Download"><i class="fa fa-cloud-download"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>03</td>
                                                        <td><a href="javascript:void(0)"><strong>Movie Title</strong></a></td>
                                                        <td class="text-right">123 min</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"><i class="fa fa-play"></i></a>
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Download"><i class="fa fa-cloud-download"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>04</td>
                                                        <td><a href="javascript:void(0)"><strong>Movie Title</strong></a></td>
                                                        <td class="text-right">119 min</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"><i class="fa fa-play"></i></a>
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Download"><i class="fa fa-cloud-download"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>05</td>
                                                        <td><a href="javascript:void(0)"><strong>Movie Title</strong></a></td>
                                                        <td class="text-right">152 min</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview"><i class="fa fa-play"></i></a>
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Download"><i class="fa fa-cloud-download"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <div class="text-center"><a href="javascript:void(0)">Show all..</a></div>
                                        </div>
                                        <!-- END Widget Main -->
                                    </div>
                                </div>
                                <!-- END Advanced Specific Theme Color Widget -->
                            </div>
                            <div class="col-md-4">
                                <!-- Advanced Specific Theme Color Widget -->
                                <div class="widget">
                                    <div class="widget-advanced">
                                        <!-- Widget Header -->
                                        <div class="widget-header text-center themed-background-dark-night">
                                            <h3 class="widget-content-light">
                                                <a href="javascript:void(0)" class="themed-color-night">Best Games Ever</a><br>
                                                <small>Top 200</small>
                                            </h3>
                                        </div>
                                        <!-- END Widget Header -->

                                        <!-- Widget Main -->
                                        <div class="widget-main">
                                            <a href="javascript:void(0)" class="widget-image-container animation-bigEntrance">
                                                <span class="widget-icon themed-background-night"><i class="gi gi-gamepad"></i></span>
                                            </a>
                                            <table class="table table-borderless table-striped table-condensed table-vcenter">
                                                <tbody>
                                                    <tr>
                                                        <td style="width: 10px;">01</td>
                                                        <td><a href="javascript:void(0)"><strong>Game Title</strong></a></td>
                                                        <td class="text-right">Action</td>
                                                        <td class="text-center" style="width: 70px;">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>02</td>
                                                        <td><a href="javascript:void(0)"><strong>Game Title</strong></a></td>
                                                        <td class="text-right">Adventure</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>03</td>
                                                        <td><a href="javascript:void(0)"><strong>Game Title</strong></a></td>
                                                        <td class="text-right">Simulation</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>04</td>
                                                        <td><a href="javascript:void(0)"><strong>Game Title</strong></a></td>
                                                        <td class="text-right">RPG</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td>05</td>
                                                        <td><a href="javascript:void(0)"><strong>Game Title</strong></a></td>
                                                        <td class="text-right">Adventure</td>
                                                        <td class="text-center">
                                                            <div class="btn-group btn-group-xs">
                                                                <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Add to Cart"><i class="fa fa-shopping-cart"></i></a>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            <div class="text-center"><a href="javascript:void(0)">Show all..</a></div>
                                        </div>
                                        <!-- END Widget Main -->
                                    </div>
                                </div>
                                <!-- END Advanced Specific Theme Color Widget -->
                            </div>
                        </div>
                        <!-- END Advanced Widgets Row -->

                        <!-- Advanced Gallery Widgets Row -->
                        <div class="row">
                            <div class="col-md-6">
                                <!-- Advanced Animated Gallery Widget -->
                                <div class="widget">
                                    <div class="widget-advanced widget-advanced-alt">
                                        <!-- Widget Header -->
                                        <div class="widget-header text-left">
                                            <!-- For best results use an image with at least 150 pixels in height (with the width relative to how big your widget will be!) - Here I'm using a 1200x150 pixels image -->
                                            <img src="img/placeholders/headers/widget5_header.jpg" alt="background" class="widget-background animation-pulseSlow">
                                            <h3 class="widget-content widget-content-image widget-content-light clearfix">
                                                <a href="javascript:void(0)" class="widget-icon pull-right">
                                                    <i class="fa fa-picture-o"></i>
                                                </a>
                                                <a href="javascript:void(0)" class="themed-color-default">Trip <strong>Gallery</strong></a><br>
                                                <small>8 Photos</small>
                                            </h3>
                                        </div>
                                        <!-- END Widget Header -->

                                        <!-- Widget Main -->
                                        <div class="widget-main">
                                            <p>Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor.</p>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate.</p>
                                            <div class="gallery gallery-widget" data-toggle="lightbox-gallery">
                                                <div class="row">
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo21.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo21.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo22.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo22.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo18.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo18.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo14.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo14.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo5.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo5.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo24.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo24.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo16.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo16.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo20.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo20.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- END Widget Main -->
                                    </div>
                                </div>
                                <!-- END Advanced Animated Gallery Widget -->
                            </div>
                            <div class="col-md-6">
                                <!-- Advanced Animated Gallery Widget 2 -->
                                <div class="widget">
                                    <div class="widget-advanced widget-advanced-alt">
                                        <!-- Widget Header -->
                                        <div class="widget-header text-left">
                                            <!-- For best results use an image with at least 150 pixels in height (with the width relative to how big your widget will be!) - Here I'm using a 1200x150 pixels image -->
                                            <img src="img/placeholders/headers/widget6_header.jpg" alt="background" class="widget-background animation-pulseSlow">
                                            <h3 class="widget-content widget-content-image widget-content-light clearfix text-right">
                                                <a href="javascript:void(0)" class="widget-icon pull-left">
                                                    <i class="fa fa-picture-o"></i>
                                                </a>
                                                <a href="javascript:void(0)" class="themed-color-default">Crazy <strong>Party</strong></a><br>
                                                <small>8 Photos</small>
                                            </h3>
                                        </div>
                                        <!-- END Widget Header -->

                                        <!-- Widget Main -->
                                        <div class="widget-main">
                                            <p>Integer sed dolor erat. Fusce erat ipsum, varius vel euismod sed, tristique et lectus? Etiam egestas fringilla enim, id convallis lectus laoreet at. Fusce purus nisi, gravida sed consectetur ut, interdum quis nisi. Quisque egestas nisl id lectus facilisis scelerisque? Proin rhoncus dui at ligula vestibulum ut facilisis ante sodales! Suspendisse potenti. Aliquam tincidunt sollicitudin sem nec ultrices. Sed at mi velit. Ut egestas tempor est, in cursus enim venenatis eget! Nulla quis ligula ipsum. Donec vitae ultrices dolor.</p>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Mauris tincidunt tincidunt turpis in porta. Integer fermentum tincidunt auctor. Vestibulum ullamcorper, odio sed rhoncus imperdiet, enim elit sollicitudin orci, eget dictum leo mi nec lectus. Nam commodo turpis id lectus scelerisque vulputate.</p>
                                            <div class="gallery gallery-widget" data-toggle="lightbox-gallery">
                                                <div class="row">
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo3.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo3.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo17.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo17.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo13.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo13.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo15.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo15.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo6.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo6.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo11.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo11.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo7.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo7.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                    <div class="col-xs-6 col-sm-3">
                                                        <a href="img/placeholders/photos/photo23.jpg" class="gallery-link" title="Image Info">
                                                            <img src="img/placeholders/photos/photo23.jpg" alt="image">
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- END Widget Main -->
                                    </div>
                                </div>
                                <!-- END Advanced Animated Gallery Widget 2 -->
                            </div>
                        </div>
                        <!-- END Advanced Gallery Widgets Row -->

                        <!-- Simple Widgets with Extra Content Row -->
                        <div class="row">
                            <div class="col-md-4">
                                <!-- Active Theme Color Widget with Extra Content -->
                                <div class="widget">
                                    <div class="widget-simple themed-background-dark">
                                        <a href="javascript:void(0)" class="widget-icon pull-right themed-background">
                                            <i class="gi gi-film animation-floating"></i>
                                        </a>
                                        <h4 class="widget-content widget-content-light">
                                            <a href="javascript:void(0)">Awesome <strong>Movie</strong></a>
                                            <small>by <a href="page_ready_user_profile.html">Henry Hunt</a></small>
                                        </h4>
                                    </div>
                                    <div class="widget-extra themed-background">
                                        <div class="row text-center">
                                            <div class="col-xs-4">
                                                <h3 class="widget-content-light">
                                                    <strong>135</strong><br>
                                                    <small>min</small>
                                                </h3>
                                            </div>
                                            <div class="col-xs-4">
                                                <h3 class="widget-content-light">
                                                    <strong>26</strong><br>
                                                    <small>reviews</small>
                                                </h3>
                                            </div>
                                            <div class="col-xs-4">
                                                <h3 class="widget-content-light">
                                                    <strong>365</strong><br>
                                                    <small>starred</small>
                                                </h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="widget-extra">
                                        <h4 class="sub-header">Summary</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Donec lacinia venenatis metus at bibendum? In hac habitasse platea dictumst.</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Donec lacinia venenatis metus at bibendum? In hac habitasse platea dictumst.</p>
                                    </div>
                                </div>
                                <!-- END Active Theme Color Widget with Extra Content -->
                            </div>
                            <div class="col-md-4">
                                <!-- Specific Theme Color Widget with Extra Content -->
                                <div class="widget">
                                    <div class="widget-simple themed-background-dark-autumn">
                                        <a href="javascript:void(0)" class="widget-icon pull-right themed-background-autumn">
                                            <i class="fa fa-gamepad animation-tossing"></i>
                                        </a>
                                        <h4 class="widget-content widget-content-light">
                                            <a href="javascript:void(0)" class="themed-color-autumn">Awesome <strong>Game</strong></a>
                                            <small>released in <em>2013</em></small>
                                        </h4>
                                    </div>
                                    <div class="widget-extra themed-background-autumn">
                                        <div class="row text-center">
                                            <div class="col-xs-6">
                                                <h3 class="widget-content-light">
                                                    <strong>2.500</strong><br>
                                                    <small>Likes</small>
                                                </h3>
                                            </div>
                                            <div class="col-xs-6">
                                                <h3 class="widget-content-light">
                                                    <strong>9.4</strong><br>
                                                    <small>out of 10</small>
                                                </h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="widget-extra">
                                        <h4 class="sub-header">Mini Review</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Donec lacinia venenatis metus at bibendum? In hac habitasse platea dictumst.</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Donec lacinia venenatis metus at bibendum? In hac habitasse platea dictumst.</p>
                                    </div>
                                </div>
                                <!-- END Specific Theme Color Widget with Extra Content -->
                            </div>
                            <div class="col-md-4">
                                <!-- Specific Theme Color Widget with Extra Content 2 -->
                                <div class="widget">
                                    <div class="widget-simple themed-background-dark-fire">
                                        <a href="javascript:void(0)" class="widget-icon pull-right themed-background-fire">
                                            <i class="fa fa-music animation-pulse"></i>
                                        </a>
                                        <h4 class="widget-content widget-content-light">
                                            <a href="javascript:void(0)" class="themed-color-fire">Awesome <strong>Song</strong></a>
                                            <small>Ultimate Album</small>
                                        </h4>
                                    </div>
                                    <div class="widget-extra themed-background-fire">
                                        <div class="row text-center">
                                            <div class="col-xs-6">
                                                <h3 class="widget-content-light">
                                                    <i class="fa fa-heart"></i><br>
                                                    <small>503 Likes</small>
                                                </h3>
                                            </div>
                                            <div class="col-xs-6">
                                                <h3 class="widget-content-light">
                                                    <i class="fa fa-headphones"></i><br>
                                                    <small>Played x790</small>
                                                </h3>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="widget-extra">
                                        <h4 class="sub-header">Artist</h4>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Donec lacinia venenatis metus at bibendum? In hac habitasse platea dictumst.</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ultrices, justo vel imperdiet gravida, urna ligula hendrerit nibh, ac cursus nibh sapien in purus. Donec lacinia venenatis metus at bibendum? In hac habitasse platea dictumst.</p>
                                    </div>
                                </div>
                                <!-- END Specific Theme Color Widget with Extra Content 2 -->
                            </div>
                        </div>
                        <!-- END Simple Widgets with Extra Content Row -->

                        <!-- Simple Widgets with Carousel Row -->
                        <div class="row">
                            <div class="col-md-4">
                                <!-- Active Theme Color Widget with Carousel -->
                                <div class="widget">
                                    <div class="widget-simple">
                                        <a href="javascript:void(0)" class="widget-icon pull-right themed-background">
                                            <i class="gi gi-picture"></i>
                                        </a>
                                        <h4 class="widget-content">
                                            <a href="javascript:void(0)"><strong>Countryside</strong> Trip</a>
                                            <small>in <a href="javascript:void(0)">Family Album</a></small>
                                        </h4>
                                    </div>
                                    <div class="widget-extra-full themed-background-dark">
                                        <!-- Carousel -->
                                        <div id="widget-carousel1" class="carousel slide remove-margin">
                                            <!-- Wrapper for slides -->
                                            <div class="carousel-inner">
                                                <div class="active item">
                                                    <img src="img/placeholders/photos/photo2.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo18.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo19.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo20.jpg" alt="image">
                                                </div>
                                            </div>
                                            <!-- END Wrapper for slides -->

                                            <!-- Controls -->
                                            <a class="left carousel-control" href="#widget-carousel1" data-slide="prev">
                                                <span><i class="fa fa-chevron-left"></i></span>
                                            </a>
                                            <a class="right carousel-control" href="#widget-carousel1" data-slide="next">
                                                <span><i class="fa fa-chevron-right"></i></span>
                                            </a>
                                            <!-- END Controls -->
                                        </div>
                                        <!-- END Carousel -->
                                    </div>
                                </div>
                                <!-- END Active Theme Color Widget with Carousel -->
                            </div>
                            <div class="col-md-4">
                                <!-- Specific Theme Color Widget with Carousel -->
                                <div class="widget">
                                    <div class="widget-simple">
                                        <a href="javascript:void(0)" class="widget-icon pull-right themed-background-autumn">
                                            <i class="fa fa-camera-retro"></i>
                                        </a>
                                        <h4 class="widget-content">
                                            <a href="javascript:void(0)" class="themed-color-autumn"><strong>Countryside</strong> Trip</a>
                                            <small>in <a href="javascript:void(0)" class="themed-color-autumn">Family Album</a></small>
                                        </h4>
                                    </div>
                                    <div class="widget-extra-full themed-background-dark-autumn">
                                        <!-- Carousel -->
                                        <div id="widget-carousel2" class="carousel slide remove-margin">
                                            <!-- Wrapper for slides -->
                                            <div class="carousel-inner">
                                                <div class="active item">
                                                    <img src="img/placeholders/photos/photo20.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo19.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo18.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo2.jpg" alt="image">
                                                </div>
                                            </div>
                                            <!-- END Wrapper for slides -->

                                            <!-- Controls -->
                                            <a class="left carousel-control" href="#widget-carousel2" data-slide="prev">
                                                <span><i class="fa fa-chevron-left"></i></span>
                                            </a>
                                            <a class="right carousel-control" href="#widget-carousel2" data-slide="next">
                                                <span><i class="fa fa-chevron-right"></i></span>
                                            </a>
                                            <!-- END Controls -->
                                        </div>
                                        <!-- END Carousel -->
                                    </div>
                                </div>
                                <!-- END Specific Theme Color Widget with Carousel -->
                            </div>
                            <div class="col-md-4">
                                <!-- Specific Theme Color Widget 2 with Carousel -->
                                <div class="widget">
                                    <div class="widget-simple themed-background-dark-modern">
                                        <a href="javascript:void(0)" class="widget-icon pull-right themed-background-modern">
                                            <i class="gi gi-camera"></i>
                                        </a>
                                        <h4 class="widget-content widget-content-light">
                                            <a href="javascript:void(0)" class="themed-color-modern"><strong>Countryside</strong> Trip</a>
                                            <small>in <a href="javascript:void(0)" class="themed-color-modern">Family Album</a></small>
                                        </h4>
                                    </div>
                                    <div class="widget-extra-full themed-background-modern">
                                        <!-- Carousel -->
                                        <div id="widget-carousel3" class="carousel slide remove-margin">
                                            <!-- Wrapper for slides -->
                                            <div class="carousel-inner">
                                                <div class="active item">
                                                    <img src="img/placeholders/photos/photo18.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo19.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo20.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo2.jpg" alt="image">
                                                </div>
                                            </div>
                                            <!-- END Wrapper for slides -->

                                            <!-- Controls -->
                                            <a class="left carousel-control" href="#widget-carousel3" data-slide="prev">
                                                <span><i class="fa fa-chevron-left"></i></span>
                                            </a>
                                            <a class="right carousel-control" href="#widget-carousel3" data-slide="next">
                                                <span><i class="fa fa-chevron-right"></i></span>
                                            </a>
                                            <!-- END Controls -->
                                        </div>
                                        <!-- END Carousel -->
                                    </div>
                                </div>
                                <!-- END Specific Theme Color Widget 2 with Carousel -->
                            </div>
                        </div>
                        <!-- END Simple Widgets with Carousel Row -->

                        <!-- Simple Widgets with Carousel Row Alternative -->
                        <div class="row">
                            <div class="col-md-4">
                                <!-- Active Theme Color Widget with Carousel Alternative -->
                                <div class="widget">
                                    <div class="widget-extra-full themed-background-dark">
                                        <!-- Carousel -->
                                        <div id="widget-carousel4" class="carousel slide remove-margin">
                                            <!-- Wrapper for slides -->
                                            <div class="carousel-inner">
                                                <div class="active item">
                                                    <img src="img/placeholders/photos/photo17.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo6.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo13.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo7.jpg" alt="image">
                                                </div>
                                            </div>
                                            <!-- END Wrapper for slides -->

                                            <!-- Controls -->
                                            <a class="left carousel-control" href="#widget-carousel4" data-slide="prev">
                                                <span><i class="fa fa-chevron-left"></i></span>
                                            </a>
                                            <a class="right carousel-control" href="#widget-carousel4" data-slide="next">
                                                <span><i class="fa fa-chevron-right"></i></span>
                                            </a>
                                            <!-- END Controls -->
                                        </div>
                                        <!-- END Carousel -->
                                    </div>
                                    <div class="widget-simple">
                                        <a href="javascript:void(0)" class="widget-icon pull-right themed-background">
                                            <i class="gi gi-music"></i>
                                        </a>
                                        <h4 class="widget-content">
                                            <a href="javascript:void(0)"><strong>Party</strong> Time</a>
                                            <small>in <a href="javascript:void(0)">Personal Album</a></small>
                                        </h4>
                                    </div>
                                </div>
                                <!-- END Active Theme Color Widget with Carousel Alternative -->
                            </div>
                            <div class="col-md-4">
                                <!-- Specific Theme Color Widget with Carousel Alternative -->
                                <div class="widget">
                                    <div class="widget-extra-full themed-background-dark-fire">
                                        <!-- Carousel -->
                                        <div id="widget-carousel5" class="carousel slide remove-margin">
                                            <!-- Wrapper for slides -->
                                            <div class="carousel-inner">
                                                <div class="active item">
                                                    <img src="img/placeholders/photos/photo6.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo13.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo7.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo17.jpg" alt="image">
                                                </div>
                                            </div>
                                            <!-- END Wrapper for slides -->

                                            <!-- Controls -->
                                            <a class="left carousel-control" href="#widget-carousel5" data-slide="prev">
                                                <span><i class="fa fa-chevron-left"></i></span>
                                            </a>
                                            <a class="right carousel-control" href="#widget-carousel5" data-slide="next">
                                                <span><i class="fa fa-chevron-right"></i></span>
                                            </a>
                                            <!-- END Controls -->
                                        </div>
                                        <!-- END Carousel -->
                                    </div>
                                    <div class="widget-simple">
                                        <a href="javascript:void(0)" class="widget-icon pull-right themed-background-fire">
                                            <i class="gi gi-pizza"></i>
                                        </a>
                                        <h4 class="widget-content">
                                            <a href="javascript:void(0)" class="themed-color-fire"><strong>Party</strong> Time</a>
                                            <small>in <a href="javascript:void(0)" class="themed-color-fire">Personal Album</a></small>
                                        </h4>
                                    </div>
                                </div>
                                <!-- END Specific Theme Color Widget with Carousel Alternative -->
                            </div>
                            <div class="col-md-4">
                                <!-- Mixed Theme Color Widget 2 with Carousel Alternative -->
                                <div class="widget">
                                    <div class="widget-extra-full themed-background-night">
                                        <!-- Carousel -->
                                        <div id="widget-carousel6" class="carousel slide remove-margin">
                                            <!-- Wrapper for slides -->
                                            <div class="carousel-inner">
                                                <div class="active item">
                                                    <img src="img/placeholders/photos/photo13.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo6.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo17.jpg" alt="image">
                                                </div>
                                                <div class="item">
                                                    <img src="img/placeholders/photos/photo7.jpg" alt="image">
                                                </div>
                                            </div>
                                            <!-- END Wrapper for slides -->

                                            <!-- Controls -->
                                            <a class="left carousel-control" href="#widget-carousel6" data-slide="prev">
                                                <span><i class="fa fa-chevron-left"></i></span>
                                            </a>
                                            <a class="right carousel-control" href="#widget-carousel6" data-slide="next">
                                                <span><i class="fa fa-chevron-right"></i></span>
                                            </a>
                                            <!-- END Controls -->
                                        </div>
                                        <!-- END Carousel -->
                                    </div>
                                    <div class="widget-simple themed-background-dark-night">
                                        <a href="javascript:void(0)" class="widget-icon pull-right themed-background-flatie">
                                            <i class="gi gi-drink"></i>
                                        </a>
                                        <h4 class="widget-content widget-content-light">
                                            <a href="javascript:void(0)" class="themed-color-flatie"><strong>Party</strong> Time</a>
                                            <small>in <a href="javascript:void(0)" class="themed-color-flatie">Personal Album</a></small>
                                        </h4>
                                    </div>
                                </div>
                                <!-- END Mixed Theme Color Widget 2 with Carousel Alternative -->
                            </div>
                        </div>
                        <!-- END Simple Widgets with Carousel Row Alternative -->
                    </div>
                    <!-- END Page Content -->

                    <!-- Footer -->
                    <footer class="clearfix">
                        <div class="pull-right">
                            Crafted with <i class="fa fa-heart text-danger"></i> by <a href="http://goo.gl/vNS3I" target="_blank">pixelcave</a>
                        </div>
                        <div class="pull-left">
                            <span id="year-copy"></span> &copy; <a href="http://goo.gl/TDOSuC" target="_blank">ProUI 3.5</a>
                        </div>
                    </footer>
                    <!-- END Footer -->
                </div>
                <!-- END Main Container -->
            </div>
            <!-- END Page Container -->
        </div>
        <!-- END Page Wrapper -->

        <!-- Scroll to top link, initialized in js/app.js - scrollToTop() -->
        <a href="#" id="to-top"><i class="fa fa-angle-double-up"></i></a>

        <!-- User Settings, modal which opens from Settings link (found in top right user menu) and the Cog link (found in sidebar user info) -->
        <div id="modal-user-settings" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <!-- Modal Header -->
                    <div class="modal-header text-center">
                        <h2 class="modal-title"><i class="fa fa-pencil"></i> Settings</h2>
                    </div>
                    <!-- END Modal Header -->

                    <!-- Modal Body -->
                    <div class="modal-body">
                        <form action="index.html" method="post" enctype="multipart/form-data" class="form-horizontal form-bordered" onsubmit="return false;">
                            <fieldset>
                                <legend>Vital Info</legend>
                                <div class="form-group">
                                    <label class="col-md-4 control-label">Username</label>
                                    <div class="col-md-8">
                                        <p class="form-control-static">Admin</p>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="user-settings-email">Email</label>
                                    <div class="col-md-8">
                                        <input type="email" id="user-settings-email" name="user-settings-email" class="form-control" value="admin@example.com">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="user-settings-notifications">Email Notifications</label>
                                    <div class="col-md-8">
                                        <label class="switch switch-primary">
                                            <input type="checkbox" id="user-settings-notifications" name="user-settings-notifications" value="1" checked>
                                            <span></span>
                                        </label>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <legend>Password Update</legend>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="user-settings-password">New Password</label>
                                    <div class="col-md-8">
                                        <input type="password" id="user-settings-password" name="user-settings-password" class="form-control" placeholder="Please choose a complex one..">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-md-4 control-label" for="user-settings-repassword">Confirm New Password</label>
                                    <div class="col-md-8">
                                        <input type="password" id="user-settings-repassword" name="user-settings-repassword" class="form-control" placeholder="..and confirm it!">
                                    </div>
                                </div>
                            </fieldset>
                            <div class="form-group form-actions">
                                <div class="col-xs-12 text-right">
                                    <button type="button" class="btn btn-sm btn-default" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-sm btn-primary">Save Changes</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- END Modal Body -->
                </div>
            </div>
        </div>
        <!-- END User Settings -->

        <!-- jQuery, Bootstrap.js, jQuery plugins and Custom JS code -->
        <script src="js/vendor/jquery-1.12.0.min.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/app.js"></script>
    </body>
</html>